import { useState } from 'react';
import { Form, Input, Button, Typography, message, Card } from 'antd';
import { LockOutlined } from '@ant-design/icons';
import './index.scss';
import { updateUser } from '../../api/user'; 
import { removeToken } from '../../store/models';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
const { Title } = Typography;

const Settings = () => {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const onFinish = async (values) => {
        setLoading(true);
        try {
            const res = await updateUser(values)
            
            if(res.data.status === 0) {
                // 使用更明确的消息配置
                message.open({
                    type: 'success',
                    content: res.data.message,
                    duration: 2,
                });
                // 延迟导航，确保消息能够显示
                setTimeout(() => {
                    dispatch(removeToken());
                    navigate('/login');
                }, 1500);
            } else {
                message.open({
                    type: 'error',
                    content: res.data.message,
                    duration: 2,
                });
            }
        } catch (error) {
            message.open({
                type: 'error',
                content: '修改失败，请稍后重试',
                duration: 2,
            });
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="settings-container">
            <div className="reset-password-wrapper">
                {/* 使用 variant 替换 bordered */}
                <Card title="账户设置" variant="bordered" className="reset-password-card">
                    <div className="reset-password-section">
                        <Title level={4} style={{ marginBottom: 24 }}>重置密码</Title>
                        
                        <Form
                            form={form}
                            name="resetPassword"
                            onFinish={onFinish}
                            layout="vertical"
                            scrollToFirstError
                            size="large"
                        >
                            <Form.Item
                                name="oldPassword"
                                label="原密码"
                                rules={[
                                    { required: true, message: '请输入原密码' },
                                    { min: 6, message: '密码至少6个字符' }
                                ]}
                            >
                                <Input.Password
                                    prefix={<LockOutlined />}
                                    placeholder="请输入原密码"
                                />
                            </Form.Item>

                            <Form.Item
                                name="newPassword"
                                label="新密码"
                                rules={[
                                    { required: true, message: '请输入新密码' },
                                    { min: 6, message: '密码至少6个字符' },
                                    
                                ]}
                                hasFeedback
                            >
                                <Input.Password
                                    prefix={<LockOutlined />}
                                    placeholder="请输入新密码"
                                />
                            </Form.Item>

                            <Form.Item
                                name="confirmPassword"
                                label="确认新密码"
                                dependencies={['newPassword']}
                                hasFeedback
                                rules={[
                                    { required: true, message: '请确认新密码' },
                                    ({ getFieldValue }) => ({
                                        validator(_, value) {
                                            if (!value || getFieldValue('newPassword') === value) {
                                                return Promise.resolve();
                                            }
                                            return Promise.reject(new Error('两次输入的密码不一致'));
                                        },
                                    }),
                                ]}
                            >
                                <Input.Password
                                    prefix={<LockOutlined />}
                                    placeholder="请再次输入新密码"
                                />
                            </Form.Item>

                            <Form.Item>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    loading={loading}
                                    size="large"
                                >
                                    确认修改
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </Card>
            </div>
        </div>
    );
};

export default Settings;